<template>
  <div class="modify-password-container">
    <div class="card">
      <h2 class="form-title">修改密码</h2>
      <div class="card-body">
        <div class="form-group">
          <label for="phone">手机号码</label>
          <input type="tel" id="phone" v-model="phone" placeholder="请输入注册手机号" required>
        </div>
        
        <div class="form-group">
          <label for="smsCode">短信验证码</label>
          <div class="verification-wrapper">
            <input type="text" id="smsCode" v-model="smsCode" placeholder="6位验证码" maxlength="6" required>
            <button id="sendSmsBtn" type="button" @click="sendSmsCode" :disabled="isSending || countdown > 0">
              {{ countdown > 0 ? `${countdown}秒后重试` : '获取验证码' }}
            </button>
          </div>
        </div>
        
        <div class="form-group">
          <label for="newPassword">新密码</label>
          <input type="password" id="newPassword" v-model="newPassword" placeholder="8-20位字母和数字组合" required>
          <p class="password-rules">建议使用字母、数字和符号的组合</p>
        </div>
        
        <div class="form-group">
          <label for="confirmPassword">确认新密码</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" placeholder="再次输入新密码" required>
        </div>
        
        <button id="submitBtn" type="submit" @click="submitForm">确认修改</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserModifyPassword",
  data() {
    return {
      phone: '',
      smsCode: '',
      newPassword: '',
      confirmPassword: '',
      isSending: false,
      countdown: 0,
      timer: null
    }
  },
  methods: {
    // 发送短信验证码
    sendSmsCode() {
      // 验证手机号格式
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        alert('请输入有效的手机号码');
        return;
      }
      
      // 防止重复点击
      if (this.isSending || this.countdown > 0) return;
      
      this.isSending = true;
      // 模拟API请求
      setTimeout(() => {
        this.$centerMessage({
          message: '验证码已发送到:' + this.phone,
          type: 'success'
        });
        this.startCountdown();
        this.isSending = false;
      }, 500);
    },
    
    // 开始倒计时
    startCountdown() {
      this.countdown = 60;
      this.timer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          this.resetCountdown();
        }
      }, 1000);
    },
    
    // 重置倒计时
    resetCountdown() {
      clearInterval(this.timer);
      this.timer = null;
    },
    
    // 提交表单
    submitForm() {
      // 验证验证码
      if (!this.smsCode || this.smsCode.length !== 6) {
        alert('请输入6位验证码');
        return;
      }
      
      // 验证两次密码是否一致
      if (this.newPassword !== this.confirmPassword) {
        alert('两次输入的密码不一致');
        return;
      }
      
      // 验证密码长度
      if (this.newPassword.length < 8) {
        alert('密码长度不能少于8位');
        return;
      }


      let userModifyPasswordInfo = { 
        userAccount: this.$store.state.user.userAccount,
        userPhone: this.phone, 
        password: this.newPassword,
        smsCode: this.smsCode, 
      }
      this.$api.serviceUser.post('api/user/modifyUserPassword', userModifyPasswordInfo, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        console.log(response.data);
        if (response.data.code == 200){
          this.$centerMessage({
            message: '修改用户密码成功',
            type: 'success'
          });

          this.phone = ''
          this.smsCode = ''
          this.newPassword = ''
          this.confirmPassword = ''
        }
        if (response.data.code == 40909){
          this.$centerMessage({
            message: response.data.message,
            type: 'error'
          });
        }
      })
      .catch(error => {
        console.log('失败', error);
      });
    }
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>
.modify-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 50px;
}

.card {
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  animation: fadeIn 0.5s ease;
}

.form-title {
  text-align: center;
  margin: 20px 0;
  color: #333;
  font-size: 18px;
  font-weight: 500;
}

.card-body {
  padding: 0;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: #666;
  font-size: 13px;
}

input {
  width: 96%;
  height: 38px;
  padding-left: 5px;
  padding-right: 5px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  background-color: #f8f8f8;
}

input:focus {
  outline: none;
  border-color: #d9d9d9;
  box-shadow: none;
}

.verification-wrapper {
  display: flex;
  gap: 10px;
}

#smsCode {
  flex: 1;
}

#sendSmsBtn {
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  height: 38px;
  padding: 0 12px;
}

#sendSmsBtn:hover {
  background: #ff7875;
}

#sendSmsBtn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

#submitBtn {
  width: 100px;
  background: #ff4d4f;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  margin: 10px auto 0;
  height: 38px;
  display: block;
}

#submitBtn:hover {
  background: #ff7875;
}

.password-rules {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>